import React from 'react';

import MUtil  from 'util/mm.js' ;
import User  from 'servers/user-server.js';

const _user = new User();
const _mm = new MUtil();

import './login.scss';
class Login extends React.Component{
    constructor(props){
        super(props);
        this.state={
            username:"",
            password:"",
            // redirect是我们在URL参数里取的一个东西
            redirect:_mm.getUrlParam('redirect') || '/'
            // 然后需要我们 去在 _mm 定义一个取参数的工具
        }
    }
    componentWillMount(){
        document.title="登录    --HAPPY SUPER 系统";
    }
    // 当用户名 发生 改变
    // onUsernameChange(e){
    //     console.log(e.target.value);
    //         this.setState({
    //             username: e.target.value
    //         })
    // }
    // onPasswordChange(e){
    //     console.log(e.target.value);
    //         this.setState({
    //             password: e.target.value
    //         })
    // }
// 代码 重构

    onInputChange(e){
       
        let inputname=e.target.name,
            inputvalue= e.target.value;
  
        this.setState({
            // 这里 很好的用到了同名
            [inputname]:inputvalue
        })
    }
    onInputKeyUp(e){ 
        // console.log('调用oninputkeyUp 事件');
        if(e.KeyCode === 13){
            console.log('onSubmit 事件');
            this.onSubmit();
        }
    }
    onSubmit(e){
        //  __mm.request() 这里用的是一个函数
        //  __mm.request({})  用{} 来包含 函数里 的一些参数 要传送的参数
        let loginInfo={
               username : this.state.username,
               password : this.state.password
        } 
        let  checkResult = _user.checkLonginInfo(loginInfo);
        // 验证通过
        if (checkResult.status){
            _user.login(loginInfo).then((res) => {
                //这块是本地存储的功能 在登录完成后
                // console.log("then里的res");
                // console.log(res);
                // localStorage.setItem("userInfo",JSON.stringify(res));
               _mm.setStorage("userInfo",res)
               
                //请求成功的话 就要他返回到首页页面
                // console.log(this.state.redirect);
                this.props.history.push(this.state.redirect)
                // history 是reac t的提供的 然后 push 压入一个新的页面 这就是来时候的页面
            }, (errMsg) => {
                // console.log("失败后的参数");                
                // console.log(errMsg);
                _mm.errorTips(errMsg);
            });
        }
        // 验证没通过
        else {
            _mm.errorTips(checkResult.msg);
        }

    }
    render(){
        return (
                <div className="col-md-4 col-md-offset-4">
                    <div className="panel panel-default login-panel">
                        <div className="panel-heading">
                            <h3 className="panel-title">欢迎登陆 --SUPER 管理系统</h3>
                        </div>
                        <div className="panel-body">
                            <div>
                                <div className="form-group">
                                    <label htmlFor="exampleInputEmail1">用户名</label>
                                    <input type="text" 
                                    name="username"
                                    className="form-control" 
                                    id="exampleInputEmail1" 
                                    placeholder="Email" 
                                    onKeyUp={(e) => { this.onInputKeyUp(e)}}
                                    onChange={(e)=>{this.onInputChange(e)}}
                                    />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="exampleInputPassword1">密码</label>
                                    <input type="password"
                                    name="password"
                                    className="form-control" 
                                    id="exampleInputPassword1" 
                                    placeholder="Password" 
                                    onKeyUp={(e) => { this.onInputKeyUp(e) }}
                                    onChange={(e)=>{this.onInputChange(e)}}
                                    />
                                </div>
                            
                                <button  
                                className="btn btn-lg btn-block  btn-primary"
                                onClick={(e)=>{this.onSubmit(e)}}
                                >登陆</button>
                            </div>
                        </div>
                    </div>
            </div> 
        )
    }
}

export default Login;